<template>
  <div class="school">
      <h2>{{msg}}</h2>
      <h2>学校姓名：{{name}}</h2>
<!--    通过转化改age-->
      <h2>学生年龄：{{myAge}}</h2>
<!--    强制类型转化，sex*1-->
      <h2>学生性别：{{sex}}</h2>
<!--    vue不建议直接修改props配置项传过来的值，但有其他方法修改-->
    <button @click="changAge">尝试修改年龄</button>
  </div>
</template>

<script>
export default {

  // eslint-disable-next-line vue/multi-word-component-names
  name: "Student",
  data(){
    return{
      msg:'我是聪明人',
      // props 优先级高，所以data可以获取
      myAge:this.age,
    }
  },
  methods:{
    changAge(){
      this.myAge++
    }
  },
  // // 传入数据（简单声明接收）
  // props:['name','sex','age']

  //接收的同时对数据进行类型限制
  // props:{
  //   name:String,
  //   age:Number,
  //   sex:String
  // }

  //接收的同时对数据进行类型限制+默认值得指定+必要性的设置
  props:{
    name:{
      type:String,
      required:true,//必须要传值，否者报错
    },
    age:{
      type:Number,
      default:99 //不传给 默认值 99
    },
    sex:{
      type:String,
      required: true
    }
  }


}
</script>

<style scoped>
    .school{
      background-color: skyblue;
    }
</style>